<script setup lang="ts">
import type { PropType } from 'vue'

// Define the structure of the 'tool' prop based on the API schema
interface Tool {
  id: string;
  name: string;
  description: string | null;
  target_api_url: string;
}

defineProps({
  tool: {
    type: Object as PropType<Tool>,
    required: true
  }
})

// Define emits for the events the card can send to its parent
const emit = defineEmits(['edit', 'delete', 'get-url', 'view-logs'])
</script>

<template>
  <el-card class="tool-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>{{ tool.name }}</span>
      </div>
    </template>
    <p class="description">{{ tool.description || '没有提供描述。' }}</p>
    <template #footer>
      <div class="card-footer">
        <el-button type="primary" link @click="emit('get-url', tool.id)">获取 MCP URL</el-button>
        <el-button type="warning" link @click="emit('view-logs', tool.id)">查看日志</el-button>
        <el-button type="default" link @click="emit('edit', tool.id)">编辑</el-button>
        <el-button type="danger" link @click="emit('delete', tool.id)">删除</el-button>
      </div>
    </template>
  </el-card>
</template>

<style scoped>
.tool-card {
  /* Frosted glass effect for the card */
  background-color: rgba(22, 27, 34, 0.7);
  border: 1px solid #30363d;
  backdrop-filter: blur(10px);
  color: #E6EDF3;
}

.card-header span {
  font-weight: 600;
  font-size: 1.1rem;
}

.description {
  font-size: 0.9rem;
  color: #8B949E;
  min-height: 40px;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
</style>
